<template>
	<view class="container">
		<navgatsmy></navgatsmy>
		<!-- 顶部背景图 -->
		<image class="header-bg" :src="headerBgImage" mode="widthFix"></image>

		<!-- 主要内容区域 -->
		<view class="content-box">

			<!-- 标题 -->
			<view class="title-section">
				<image class="logo" :src="logoImage" mode="aspectFit"></image>
				<text class="title">Steam账号管理</text>
			</view>

			<!-- 账号绑定区域 -->
			<view class="section-card">
				<view class="section-header">
					<text class="section-title">账号绑定</text>
				</view>

				<!-- 主号绑定 -->
				<view class="account-row main-account">
					<view class="account-info">
						<text class="account-label">主账号</text>
						<input v-model="mainAccountName" class="account-input" placeholder="请输入主账号"
							placeholder-class="placeholder" />
					</view>
					<button class="get-btn" @click="gotoGetAccount('main')">
						{{ mainAccountName ? '修改' : '绑定' }}
					</button>
				</view>

				<!-- 副号绑定 -->
				<view class="account-row sub-account">
					<view class="account-info">
						<text class="account-label">副账号</text>
						<input v-model="subAccountName" class="account-input" placeholder="请输入副账号"
							placeholder-class="placeholder" />
					</view>
					<button class="get-btn" @click="gotoGetAccount('sub')">
						绑定
					</button>
				</view>

				<!-- 新增提示信息 -->
				<view class="hint-text">
					<text>1) 获取你的Steam交易链接 </text>
					<text class="link-text" @click="gotoGetTradeLink">点击这里</text>
				</view>
			</view>

			<!-- 绑定码区域 -->
			<view class="section-card">
				<view class="section-header">
					<text class="section-title">绑定码管理</text>
				</view>

				<!-- 提货绑定码 -->
				<view class="code-row">
					<view class="code-info">
						<text class="code-label">提货绑定码</text>
						<text class="code-value" v-if="withdrawCode">{{ withdrawCode }}</text>
						<text class="code-value empty" v-else>未生成</text>
					</view>
					<button class="action-btn" @click="withdrawCode ? copyCode('withdraw') : generateCode('withdraw')">
						{{ withdrawCode ? '复制' : '生成' }}
					</button>
				</view>

				<!-- 兑换绑定码 -->
				<view class="code-row redeem-container">
					<view class="code-info redeem-info">
						<text class="code-label">兑换绑定码</text>
						<input v-model="redeemCode" class="code-input" placeholder="输入他人提供的绑定码"
							placeholder-class="placeholder" />
					</view>
					<button class="action-btn redeem-btn" :disabled="!redeemCode" @click="redeemCodeAction">
						兑换
					</button>
				</view>
			</view>

			<!-- 绑定码列表 -->
			<view class="section-card" v-if="boundCodes.length > 0">
				<view class="section-header">
					<text class="section-title">已绑定设备</text>
				</view>

				<view class="bound-device" v-for="(item, index) in boundCodes" :key="index">
					<view class="device-info">
						<text class="device-name">{{ item.deviceName }}</text>
						<text class="device-time">绑定时间: {{ item.bindTime }}</text>
					</view>
					<button class="unbind-btn" @click="unbindDevice(item.id)">解绑</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	getSet_steam_url,
	getUsetInof
} from "../../api/outOfTheFree/index.js"
import navgatsmy from "../../Component/navgatsmy/navgatsmy.vue"
export default {
	data() {
		return {
			// 获取用户绑没绑定steam
			steamurl: "",
			// 图片资源路径
			headerBgImage: '',
			logoImage: '',

			// 账号数据
			mainAccountName: '',
			subAccountName: '',

			// 绑定码数据
			withdrawCode: '',
			redeemCode: '',
			boundCodes: [{
				id: '1',
				deviceName: 'iPhone 12',
				bindTime: '2023-07-15 14:30'
			},
			{
				id: '2',
				deviceName: 'iPad Pro',
				bindTime: '2023-07-10 09:15'
			}
			]
		}
	},
	components: {
		navgatsmy
	},
	onShow() {
		this.getUsetInofs()
	},
	methods: {
		// 获取用户信息
		async getUsetInofs() {
			let res = await getUsetInof()
			console.log(res)
			this.steamurl = res.data.steam_url
			// 将获取到的steamurl赋值给主账号输入框
			this.mainAccountName = this.steamurl || ''
		},
		// 绑定steam接口
		async getSet_steam_urls(data) {
			let res = await getSet_steam_url({
				steam_url: data
			})
			console.log(res, "ressteam")
			if (res.code === 200) {
				uni.showToast({
					title: res.message,
					icon: 'success'
				})
			} else {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}
		},
		// 前往获取账号
		gotoGetAccount(type) {
			console.log(type, "type")
			console.log(this.mainAccountName, "主账号设置")
			this.getSet_steam_urls(this.mainAccountName)
		},

		// 获取账号信息
		getAccountInfo(type) {
			uni.showLoading({
				title: '获取中...'
			})

			// 模拟API请求 - 实际应用中这里会跳转到Steam授权页面
			setTimeout(() => {
				uni.hideLoading()

				if (type === 'main') {
					this.mainAccountName = 'CSGO_Player_' + Math.floor(Math.random() * 1000)
				} else {
					this.subAccountName = 'CSGO_Sub_' + Math.floor(Math.random() * 1000)
				}

				uni.showToast({
					title: '获取成功',
					icon: 'success'
				})
			}, 1500)
		},

		// 前往获取交易链接
		gotoGetTradeLink() {
			uni.showModal({
				title: '获取Steam交易链接',
				content: '即将跳转到Steam获取交易链接',
				confirmText: '前往',
				success: (res) => {
					if (res.confirm) {
						// 实际应用中这里会跳转到Steam相关页面
						uni.showToast({
							title: '已跳转至Steam',
							icon: 'none'
						})
						// 在新窗口中打开指定的URL地址
						window.open(
							"https://steamcommunity.com/id/me/tradeoffers/privacy#trade_offer_access_url"
						);
						// window.location.href=""
					}
				}
			})
		},

		// 生成绑定码
		generateCode(type) {
			uni.showLoading({
				title: '生成中...'
			})

			// 模拟API请求
			setTimeout(() => {
				uni.hideLoading()

				const code = 'CSGO-' + Math.random().toString(36).substr(2, 8).toUpperCase()
				this.withdrawCode = code

				uni.showToast({
					title: '生成成功',
					icon: 'success'
				})
			}, 1000)
		},

		// 复制绑定码
		copyCode(type) {
			const code = type === 'withdraw' ? this.withdrawCode : this.redeemCode
			uni.setClipboardData({
				data: code,
				success: () => {
					uni.showToast({
						title: '已复制到剪贴板',
						icon: 'none'
					})
				}
			})
		},

		// 兑换绑定码
		redeemCodeAction() {
			if (!this.redeemCode) return

			uni.showLoading({
				title: '兑换中...'
			})

			// 模拟API请求
			setTimeout(() => {
				uni.hideLoading()

				this.boundCodes.unshift({
					id: Date.now().toString(),
					deviceName: '新设备',
					bindTime: new Date().toLocaleString()
				})

				this.redeemCode = ''

				uni.showToast({
					title: '兑换成功',
					icon: 'success'
				})
			}, 1500)
		},

		// 解绑设备
		unbindDevice(id) {
			uni.showModal({
				title: '确认解绑',
				content: '确定要解绑此设备吗？',
				success: (res) => {
					if (res.confirm) {
						this.boundCodes = this.boundCodes.filter(item => item.id !== id)
						uni.showToast({
							title: '解绑成功',
							icon: 'success'
						})
					}
				}
			})
		}
	}
}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background: url("https://img.jingkakeji.com/img/static/huabanone.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	display: flex;
	flex-direction: column;
	padding-bottom: 40rpx;
}

.header-bg {
	width: 100%;
	height: auto;
}

.content-box {
	flex: 1;
	padding: 30rpx;
	display: flex;
	flex-direction: column;
}

.title-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 40rpx;
}

.logo {
	width: 100rpx;
	height: 100rpx;
	margin-bottom: 20rpx;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
}

.section-card {
	background: url("https://img.jingkakeji.com/img/static/lujinshe.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
}

.section-header {
	margin-bottom: 30rpx;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #333;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: black;
}

/* 账号绑定行样式 */
.account-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 25rpx 0;

	&.main-account {
		border-bottom: 1rpx solid #333;
	}
}

.account-info {
	flex: 1;
}

.account-label {
	font-size: 28rpx;
	font-weight: 500;
	display: block;
	margin-bottom: 10rpx;
	color: black;
}

.account-input {
	font-size: 24rpx;
	color: #fff;
	height: 50rpx;
	width: 100%;
	padding: 5rpx 10rpx;
	background-color: rgba(0, 0, 0, 0.1);
	border-radius: 8rpx;
}

.get-btn {
	background-color: #1A6ED8;
	color: #fff;
	font-size: 26rpx;
	padding: 10rpx 30rpx;
	border-radius: 30rpx;
	margin: 0;
	margin-left: 20rpx;
	white-space: nowrap;
	/* 防止按钮文字换行 */

	&::after {
		border: none;
	}
}

/* 新增提示文本样式 */
.hint-text {
	margin-top: 20rpx;
	font-size: 24rpx;
	color: #666;
	padding-top: 15rpx;
	border-top: 1rpx dashed #333;
}

.link-text {
	color: #1A6ED8;
	/* 浅蓝色 */
	text-decoration: underline;
	cursor: pointer;
	margin-left: 5rpx;
}

/* 绑定码行样式 */
.code-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 25rpx 0;
	border-bottom: 1rpx solid #333;

	&:last-child {
		border-bottom: none;
	}
}

/* 兑换绑定码容器特殊样式 */
.redeem-container {
	align-items: flex-start;
	/* 顶部对齐防止输入框过高时的问题 */
	padding-top: 15rpx;
	padding-bottom: 15rpx;
}

.redeem-info {
	padding-right: 20rpx;
	/* 增加右侧间距防止与按钮重叠 */
}

.code-info {
	flex: 1;
}

.code-label {
	font-size: 28rpx;
	font-weight: 500;
	display: block;
	margin-bottom: 10rpx;
	color: black;
}

.code-value {
	font-size: 24rpx;
	color: #1A6ED8;

	&.empty {
		color: #888;
	}
}

.code-input {
	font-size: 24rpx;
	color: #fff;
	height: 50rpx;
	width: 100%;
	padding: 5rpx 10rpx;
	background-color: rgba(0, 0, 0, 0.1);
	border-radius: 8rpx;
	box-sizing: border-box;
	/* 确保padding不会增加总宽度 */
}

.placeholder {
	color: #555;
}

.action-btn {
	background-color: #333;
	color: #fff;
	font-size: 26rpx;
	padding: 10rpx 30rpx;
	border-radius: 30rpx;
	margin: 0;
	white-space: nowrap;
	/* 防止按钮文字换行 */

	&::after {
		border: none;
	}

	&.redeem-btn {
		background-color: #1A6ED8;
		margin-top: 38rpx;
		/* 与输入框label对齐 */

		&[disabled] {
			background-color: #1A3D7C;
			opacity: 0.6;
		}
	}
}

/* 已绑定设备样式 */
.bound-device {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 25rpx 0;
	border-bottom: 1rpx solid #333;

	&:last-child {
		border-bottom: none;
	}
}

.device-info {
	flex: 1;
}

.device-name {
	font-size: 28rpx;
	display: block;
	margin-bottom: 8rpx;
	color: black;
}

.device-time {
	font-size: 22rpx;
	color: #888;
}

.unbind-btn {
	background-color: transparent;
	color: #FF5252;
	font-size: 26rpx;
	padding: 10rpx 20rpx;
	border: 1rpx solid #FF5252;
	border-radius: 30rpx;
	margin: 0;

	&::after {
		border: none;
	}
}
</style>